<template>
  <view>
    <u-navbar title="商家信息" title-size="36"></u-navbar>
    <u-gap height="20" color="#f1f2f3"></u-gap>
    <view class="top">
      <view class="view-item1">
        <text class="need">*</text>
        <p>营业状态</p>
        <u-switch v-model="checked" @change="onChecke"></u-switch>
      </view>
      <!-- <view class="view-item1" @click="onPicker('selector', 'category')">
				<text class="need">*</text>
				<p>经营类目</p>
				<text v-if="rangeCate" style="color:#999999">{{rangeCate.name}}</text>
				<text v-else style="color:#999999">请设置</text>
				<u-icon style="margin-left: 10rpx;" name="/static/img/more.png" size="15"></u-icon>
			</view> -->

      <view class="view-item1">
        <text class="need">*</text>
        <p class="title">商家名称</p>
        <input v-model="merchantInfo.name" type="text" placeholder="请输入商家名称" />
      </view>

      <view class="view-item1">
        <text class="need">*</text>
        <p class="title">联系人</p>
        <input v-model="merchantInfo.ownerName" type="text" placeholder="请输入联系人" />
      </view>

      <view class="view-item1">
        <text class="need">*</text>
        <p class="title">联系电话</p>
        <input v-model="merchantInfo.ownerMobile" type="text" placeholder="请输入联系人" />
      </view>

      <view class="view-item1" @click="onPicker('region')">
        <text class="need">*</text>
        <p class="title">经营地址</p>
        <p v-if="region" style="flex: 7">{{
          region.province.label + region.city.label + region.area.label
        }}</p>
        <p v-else-if="merchantInfo.provinceCityArea" style="flex: 7">{{
          merchantInfo.provinceCityArea
        }}</p>

        <text v-else style="color: #999999">请选择</text>
        <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
      </view>

      <view class="view-item1">
        <text class="need">*</text>
        <p class="title">详细地址</p>
        <input v-model="merchantInfo.detailAddress" type="text" placeholder="请输入详细地址" />
      </view>
    </view>

    <view class="view-bar">
      <view class="view-item1" @click="onPicker('selector', 'rule')">
        <text class="need">*</text>
        <p>配送规则</p>
        <text v-if="rangeRule">{{ rangeRule.label }}</text>
        <text v-else style="color: #999999">请选择</text>
        <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
      </view>
    </view>
    <!-- <view class="view-bar">
			<view class="view-item1" @click="routeTo">
				<text class="need">*</text>
				<p>提现账号</p>
				<text style="color:#999999">请选择提现银行卡</text>
				<u-icon style="margin-left: 10rpx;" name="/static/img/more.png" size="15"></u-icon>
			</view>
		</view> -->

    <view class="floor">
      <view class="">
        <text class="need">*</text>
        商家门头照封面图
      </view>
      <view class="icon-box" @click="onUpload()">
        <u-avatar class="logo" :src="merchantInfo.logo" size="140"></u-avatar>
        <view class="box-title"> 点击修改头像 </view>
      </view>
      <!-- <u-upload
            ref="uUpload"
            :action="upUrl"
            max-count="1"
            :file-list="fileList"
           ></u-upload> -->
    </view>
    <view @click="submit" class="submit-btn" style="margin: 100rpx 20rpx"> 确认保存 </view>
    <u-picker
      :mode="mode"
      v-model="show"
      :range="range"
      @confirm="confirmSelctor"
      :range-key="rangeKey"
    ></u-picker>
  </view>
</template>

<script>
import { BASE_URL, UP_URL } from '@/common/config.js'
import { uploadFiles } from '@/common/upload.js'
export default {
  data() {
    return {
      mode: 'selector',
      show: false,
      checked: false,
      rangeKey: '',
      rangeCate: '',
      rangeRule: '',
      region: '',
      regionCateList: [],
      regionRuleList: [],
      upUrl: BASE_URL + UP_URL,
      merchantInfo: {},
      range: [
        {
          label: '全场包邮',
          id: 1
        },
        {
          label: '满100包邮',
          id: 2
        }
      ],
      fileList: []
    }
  },
  onShow() {
    this.$u.get('/app-api/shop/detail/my').then((res) => {
      this.merchantInfo = res.data
      this.checked = res.data.status == 1 ? true : false
      this.fileList.push({ url: res.data.logo })
      this.$u
        .get('/app-api/shop/detail/get-category-list', { type: res.data.type })
        .then((res2) => {
          this.regionCateList = res2.data
          for (let item of this.regionCateList) {
            if (this.merchantInfo.categoryId == item.id) {
              this.rangeCate = item
              break
            }
          }
        })
    })

    this.$u.get('/app-api/trade/delivery/express-template/list-all-simple').then((res) => {
      this.regionRuleList = res.data
    })
  },
  methods: {
    confirmSelctor(e) {
      console.log(e)
      if (this.mode == 'selector') {
        if (this.rangeKey == 'name') {
          this.merchantInfo.categoryId = this.range[e].id
          // this.$u.put("/app-api/shop/detail/update-product-category", {id: this.merchantInfo.id, categoryId: this.range[e].id}).then(res=>{
          // 	this.rangeCate = this.range[e]
          // 	this.$u.toast("更改店铺经营类目")
          // })
        } else {
          //this.merchantInfo.categoryId = this.range[e].id
        }
      } else {
        this.region = e
        this.merchantInfo.cityId = e.city.value
      }
    },
    onChecke(e) {
      let status = ''
      if (e) {
        //uni.dialog.confirm("温馨提示", "营业状态关闭时，用户将不能在首页查看店铺商品")
        status = 1
      } else {
        status = 2
      }
      this.$u
        .put('/app-api/shop/detail/update-status', { id: this.merchantInfo.id, status })
        .then((res) => {
          if (e) {
            this.$u.toast('店铺营业状态已打开')
          } else {
            this.$u.toast('店铺营业状态已关闭')
          }
        })
    },
    onPicker(e, f) {
      this.mode = e
      if (f == 'category') {
        this.rangeKey = 'name'
        this.range = this.regionCateList
      } else if (f == 'rule') {
        this.rangeKey = 'data'
        this.range = this.regionRuleList
      }
      this.show = true
    },
    routeTo() {
      uni.navigateTo({
        url: '/other/bank-card-list/bank-card-list'
      })
    },

    onUpload() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          uploadFiles(res.tempFilePaths[0]).then((path) => {
            this.merchantInfo.logo = path.data

            // this.$u.put("/app-api/member/user/update-avatar", {avatar: path.data}).then(res=>{
            // 	this.userInfo.avatar = path.data
            // 	this.$u.toast("成功")
            // })
          })
        }
      })
    },
    submit() {
      //this.merchantInfo.cityId = this.region.city.value
      console.log(this.$refs.uUpload)
      // this.$refs.uUpload.lists.forEach(val => {
      // 	if(val.response){
      // 		this.merchantInfo.logo = val.response.data
      // 	}else{
      // 		this.merchantInfo.logo = val.url
      // 	}
      // })

      this.$u.put('/app-api/shop/detail/update-address', this.merchantInfo).then((res) => {})

      this.$u.put('/app-api/shop/detail/update-basic', this.merchantInfo).then((res) => {
        this.$u.toast('成功')

        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 800)
      })
    }
  }
}
</script>

<style>
@import url(../../style/btn.css);
page {
  background-color: #f2f2f2;
  font-size: 30rpx;
}
.top {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.need {
  color: red;
}

.view-item1 {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 2rpx solid #ededed;
}
.view-item1 p {
  flex: 1;
}
.view-item1 .title {
  flex: 2;
}
input {
  flex: 8;
}
.view-bar {
  background-color: #fff;
  margin-bottom: 20rpx;
}
.floor {
  padding: 20rpx;
  background-color: #fff;
}
</style>
